<template>
	<view class="content public">
		<view class="statusTitle">
			<view :class="{ 'statusTitleSelected': statusTitleNum == index }" v-for="(item, index) in statusTitle" :key="index"
				@click="eventStatusTitle(index)">
				<text>{{ item }}</text>
			</view>
		</view>
		<view class="icon-box-img" v-if="arr == [] || arr.length == 0">
			<img src="../../static/index/noResult.png" alt="">
			<view class="text">
				未查询到相关数据
			</view>
		</view>
		<view style="padding-bottom: 150rpx;">
			<view class="main" v-for="item in arr" :key="item.order_id">
				<view class="main-item">
					<view class="title">
						<view class="" v-if="statusTitleNum == 3">
							订单完成时间：{{ item.sign_time | formatTime }}
						</view>
						<view class="" v-else>
							订单创建时间：{{ item.create_time | formatTime }}
						</view>
						<view>单号：{{ item.today_number }}</view>
					</view>
					<view class="main-main" @click="JumpOrderDetails(item)">
						<view class="">
							<steps></steps>
						</view>
						<view class="main-right">
							<view class="main-right-business">
								<view class="main-right-header">
									<!-- 信阳师范大学1食堂二楼201 -->
									{{ item.site_info.address }}
								</view>
								<view class="main-right-footer">
									<view class="">
										<!-- 商家<text>15445434543</text> -->
										{{ item.site_info.name }} <text>{{ item.site_info.mobile }}</text>
									</view>
								</view>
							</view>
							<view class="main-right-user" v-if="item.status !== 3">
								<view class="main-right-header">
									<!-- 信阳师范大学1宿舍楼301 -->
									{{ item.address }}{{ item.house_number }}
								</view>
								<view class="main-right-footer">
									<!-- 张三<text>19887656765</text> -->
									{{ item.name }} <text>{{ item.mobile }}</text>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="">
					<!-- 外卖订单-待取货/待送货 -->
					<view class="CollectionAndDeliveryByProxy">
						<!-- 新任务 -->
						<view class="footer-buttonOne" v-if="statusTitleNum == 0">
							<button @click="orders(item)">接单</button>
						</view>
						<!-- 待取货 -->
						<view class="footer-buttonTwo" v-if="statusTitleNum == 1">
							<view class="" @click="MakingPhoneCalls(item)">
								<image src="../static/phone.png" mode=""></image>
								<text>联系商家</text>
							</view>
							<button @click="pickUp(item)">确认取货</button>
						</view>
						<!-- 待送达 -->
						<view class="footer-buttonTwo" v-if="statusTitleNum == 2">
							<view class="" @click="MakingPhoneCallsPhone(item)">
								<image src="../static/phone.png" mode=""></image>
								<text>联系收货</text>
							</view>
							<button @click="service(item)">我已送达</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" v-if="arr.length > 10" />
	</view>
</template>

<script>
import steps from '../components/package/steps/steps.vue'
const $api = require('@/utils/request.js').API
export default {
	components: {
		steps,
	},
	data() {
		return {
			statusTitle: ['新任务', '待取货', '待送达', '已送达'],
			statusTitleNum: 0, // 头部状态
			// orderForGoodsStatus: 0, // 订单状态
			tabBarNumStatus: 1,
			// 展示的列表
			arr: [],
			//新任务
			newTaskList: [],
			// 待取货
			waitingForDeliveryList: [],
			// 待送达
			toBeDeliveredList: [],
			// 已送达
			finishedList: [],


			status: 'loading',
			// 当前页
			page1: 1,
			page2: 1,
			page3: 1,
			page4: 1,

			// 总页数
			page_count1: 0,
			page_count2: 0,
			page_count3: 0,
			page_count4: 0,


		}
	},
	created() {
		this.receivingOrders()
		this.deliveryOrder('waitsend')
		this.deliveryOrder('waitconfirm')
		this.deliveryOrder('finished')

	},

	// 触底方法
	onReachBottom() {
		switch (this.statusTitleNum) {
			case 0: {
				if (this.page1 >= this.page_count1) {
					this.status = 'nomore'
				} else {
					this.page1 = this.page1 + 1
					this.receivingOrders()
				}
				break
			}
			case 1: {
				if (this.page2 >= this.page_count2) {
					this.status = 'nomore'
				} else {
					this.page2 = this.page2 + 1
					this.deliveryOrder('waitsend')
				}
				break
			}
			case 2: {
				if (this.page3 >= this.page_count3) {
					this.status = 'nomore'
				} else {
					this.page3 = this.page3 + 1
					this.deliveryOrder('waitconfirm')
				}
				break
			}
			case 3: {
				if (this.page4 >= this.page_count4) {
					this.status = 'nomore'
				} else {
					this.page4 = this.page4 + 1
					this.deliveryOrder('finished ')
				}
				break
			}
		}
	},



	methods: {
		// 接单
		orders(item) {
			$api.postReceivingOrders({
				order_id: item.order_id
			}).then(res => {
				this.page1 = 1
				this.newTaskList = []
				this.receivingOrders()
				this.page2 = 1
				this.waitingForDeliveryList = []
				this.deliveryOrder('waitsend')
				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 2000
				})
			}).catch(err => {
				uni.showToast({
					title: err,
					icon: "none",
					duration: 2000,
				});
			})
		},
		// 待取活和待送达列表
		deliveryOrder(status) {
			let p = null
			switch (status) {
				case 'waitsend': {
					p = this.page2
					break
				}
				case 'waitconfirm': {
					p = this.page3
					break
				}
				case 'finished': {
					p = this.page4
					break
				}
			}
			$api.postDeliveryOrder({
				page: p,
				order_status: status
			}).then(res => {
				let { list = [], page_count } = res.data.data

				switch (status) {
					case 'waitsend': {
						this.page_count2 = page_count
						this.waitingForDeliveryList = [...this.waitingForDeliveryList, ...list]
						break
					}
					case 'waitconfirm': {
						this.page_count3 = page_count
						this.toBeDeliveredList = [...this.toBeDeliveredList, ...list]
						break
					}
					case 'finished': {
						this.page_count4 = page_count
						this.finishedList = [...this.finishedList, ...list]
						break
					}
				}
				this.showList()
			})
		},
		// 新任务列表
		receivingOrders() {
			$api.postReceivingHall({
				page: this.page1
			}).then(res => {
				let { list = [], page_count } = res.data.data
				this.page_count1 = page_count
				this.newTaskList = [...this.newTaskList, ...list]
				this.showList()
			})
		},
		// 确认取货
		pickUp(item) {

			$api.postPickUp({
				// token: uni.getStorageSync('token'),
				order_id: item.order_id
			}).then(res => {
				this.page2 = 1
				this.waitingForDeliveryList = []
				this.deliveryOrder('waitsend')
				this.page3 = 1
				this.toBeDeliveredList = []
				this.deliveryOrder('waitconfirm')

				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 2000
				})
			})
		},
		// 送达
		service(item) {
			$api.postService({
				order_id: item.order_id
			}).then(res => {
				this.page3 = 1
				this.toBeDeliveredList = []
				this.deliveryOrder('waitconfirm')
				this.page4 = 1
				this.finishedList = []
				this.deliveryOrder('finished')
				uni.showToast({
					title: res.data.message,
					icon: 'none',
					duration: 2000
				})
			})
		},
		// 跳转订单详情
		JumpOrderDetails(item) {
			item.statusTitleNum = this.statusTitleNum
			uni.navigateTo({
				url: '../index/orderDetails?item=' + JSON.stringify(item)
			})
		},
		// 点击tab栏
		eventStatusTitle(index) {
			this.statusTitleNum = index
			if (index == 0) {
				this.newTaskList = []
				this.page1 = 1
				this.receivingOrders()
			} else {
				this.showList()
			}
		},

		// 拨打电话
		MakingPhoneCalls(item) {
			uni.makePhoneCall({
				phoneNumber: item.site_info.mobile
			})
		},
		MakingPhoneCallsPhone(item) {
			uni.makePhoneCall({
				phoneNumber: item.mobile
			})
		},
		tabBarNum(e) {
			this.tabBarNumStatus = e
			uni.reLaunch({
				url: e
			})
		},

		// 展示要显示的数据
		showList() {
			switch (this.statusTitleNum) {
				case 0: {
					this.arr = this.newTaskList
					break
				}
				case 1: {
					this.arr = this.waitingForDeliveryList
					break
				}
				case 2: {
					this.arr = this.toBeDeliveredList
					break
				}
				case 3: {
					this.arr = this.finishedList
					break
				}

			}
			//结束下拉刷新
			uni.stopPullDownRefresh();
		},
		// 监听下拉刷新
		refreshList() {
			switch (this.statusTitleNum) {
				case 0: {
					this.newTaskList = []
					this.page1 = 1
					this.receivingOrders()
					break
				}
				case 1: {
					this.waitingForDeliveryList = []
					this.page2 = 1
					this.deliveryOrder('waitsend')

					break
				}
				case 2: {
					this.toBeDeliveredList = []
					this.page3 = 1
					this.deliveryOrder('waitconfirm')
					break
				}
				case 3: {
					this.finishedList = []
					this.page4 = 1
					this.deliveryOrder('finished')
					break
				}
			}

		}
	}
}
</script>

<style lang="less" scoped>
.content {
	background: #F7F7F7;

	// 选中外卖订单头部标题
	.statusTitleSelected {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		color: #F14500;
		border-bottom: 2px solid #F14500;
	}

	// 外卖订单头部标题
	.statusTitle {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 94rpx;
		background: #FFFFFF;
		font-size: 32rpx;
		font-weight: 400;
		color: #2E2E2E;
	}

	// 内容
	.main {
		width: 702rpx;
		// height: 417rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.14);
		border-radius: 20rpx;
		margin: auto;
		margin-top: 16rpx;
		margin-bottom: 20rpx;

		.main-item {
			width: 640rpx;
			margin: auto;

			// 下单时间，什么时间前送到
			.title {
				display: flex;
				justify-content: space-between;
				padding-top: 31rpx;
				padding-bottom: 25rpx;

				.title-right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 104rpx;
					height: 34rpx;
					border: 1px solid #F14500;
					border-radius: 17rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: #F14500;
				}
			}

			.main-main {
				display: flex;
				border-bottom: 1px solid #F2F2F2;
				padding-bottom: 23rpx;

				// 运
				.move {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 38rpx;
					height: 38rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					border-radius: 50%;
					background: #F14500;
					margin-right: 15rpx;
				}

				.main-right {

					// 商家地址，用户地址
					.main-right-header {
						font-size: 26rpx;
						font-weight: 500;
						color: #3A3A3A;
					}

					// 商家电话，用户电话
					.main-right-footer {
						height: 35rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #979797;

						text {
							padding-left: 20rpx;
						}
					}

					.main-right-user {
						padding-top: 38rpx;
					}
				}
			}
		}
	}

	.CollectionAndDeliveryByProxy {

		// 按钮
		.footer-buttonOne {
			margin-top: 40rpx;
			padding-bottom: 20rpx;

			button {
				width: 637rpx;
				height: 69rpx;
				background: #F14500;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		// 按钮
		.footer-buttonTwo {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			padding-bottom: 20rpx;
			margin-left: 30rpx;

			view:first-child {
				display: flex;
				align-items: center;
				font-size: 35rpx;
				font-weight: 400;
				color: #F14500;
				margin-right: 30rpx;

				image {
					width: 31rpx;
					height: 38rpx;
				}

				text {
					padding-left: 15rpx;
				}
			}

			button {
				// width: 430rpx;
				width: 400rpx;
				height: 69rpx;
				background: #F14500;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.statuschang {
				width: 637rpx;
				// width: 700rpx;
				height: 69rpx;
				background: #F14500;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
	}
}

.icon-box-img {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 80rpx;
	text-align: center;

	img {
		width: 343rpx;
		height: 306rpx;
	}

	image {
		width: 343rpx;
		height: 306rpx;
	}

	.text {
		margin-top: 35rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #C3C4C4;
		line-height: 30rpx;
	}
}
</style>